<template>
  <div class="login" :style="winSize">
    <el-row>
      <el-col :span='24'>
        <div class="content">
          <el-form label-position="left" label-width="0px" class="demo-ruleForm card-box loginform"
                   v-loading="login_actions.disabled"
                   element-loading-text="正在登录..."
                   :style="formOffset"
                   :model='data'
                   :rules="rule_data"
                   ref='data'>
            <h3 class="title">系统登录</h3>
            <el-form-item
              prop='userID'>
              <el-input type="text" auto-complete="off" placeholder="账号"
                        v-model='data.userID'
                        @keyup.native.enter="login('data')"></el-input>
            </el-form-item>
            <el-form-item
              prop='password'>
              <el-input type="password" auto-complete="off" placeholder="密码"
                        v-model='data.password'
                        @keyup.native.enter="login('data')"></el-input>
            </el-form-item>
            <el-form-item
              prop='verificationCode'>
              <el-row :gutter="20">
                <el-col :span='13'>
                  <el-input type="text" auto-complete="off" placeholder="验证码"
                            v-model='verificationCode'
                            @blur="setVerifyResult"
                            @keyup.native.enter="login('data')">

                  </el-input>
                </el-col>
                <el-col :span='9'>
                  <div id="verificationCode" style="width: 100%;height: 36px"></div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-checkbox style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
              <el-button type="primary" @click='login("data")'>登录</el-button>
              <el-button @click='resetForm("data")'>重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import gVerify from '../../assets/js/gVerify.js'
  export default {
    name: 'login',
    data() {
      var verify = (rule, value, callback) => {
        //console.log(value)
        if (value == '') {
          callback(new Error('请输入验证码'));
        } else if (!this.code) {
          callback(new Error('验证码输入有误'));
        } else {
          callback();
        }
      };
      var verifyCode;
      return {
        winSize: {
          width: '',
          height: ''
        },
        formOffset: {
          position: 'absolute',
          left: '',
          top: ''
        },
        login_actions: {
          disabled: false
        },
        data: {
          userID: '',
          password: ''
        },
        verificationCode: '',
        code: '',
        rule_data: {
          userID: [{
            required: true,
            message: '用户名不能为空！',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '密码不能为空！',
            trigger: 'blur'
          }],
          verificationCode: [{
            validator: verify,
            trigger: 'blur'
          }],
        }
      }
    },
    created() {
      this.init();
    },
    mounted() {
    },
    methods: {
      init(){
        this.setSize();
        this.setVerifyCode();
      },
      setSize() {
        this.winSize.width = document.body.offsetWidth + "px";
        this.winSize.height = document.body.offsetHeight + "px";

        this.formOffset.left = (parseInt(this.winSize.width) / 2 - 175) + 'px';
        this.formOffset.top = (parseInt(this.winSize.height) / 2 - 178) + 'px';
      },
      setVerifyCode(){
        this.$nextTick(() => {
          this.verifyCode = new GVerify("verificationCode")
        })
      },
      setVerifyResult(){
        this.code = this.verifyCode.validate(this.verificationCode)
      },
      login(ref) {
        this.$refs[ref].validate((valid) => {
          if (valid) {
            this.loginAction();
          }
        });
      },
      loginAction(){
        this.$http.post(this.$until.url + '/PClogin/pclogin', this.data)
          .then((res) => {
            if (res.body.isLogin == 'true') {
              this.$until.login = true;
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              this.$router.push({path: '/'});
            } else {
              alert(res.body.message);
            }
          }, (err) => {
            alert(res.body.error);
          });
      },
      resetForm(ref) {
        this.$refs[ref].resetFields();
      }
    }
  }
</script>

<style scoped>
  .login {
    background: #1F2D3D;
  }

  .card-box {
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin-bottom: 20px;
    background-color: #F9FAFC;
    border: 2px solid #8492A6;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .loginform {
    width: 350px;
    padding: 35px 35px 15px 35px;
  }
</style>
